<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@include file="/static/common/taglib.jsp" %>
<head>
    <%@include file="../public/web/commonJs.jsp" %>
</head>
<body class="ms-controller" ms-controller="shoesList">

<%@include file="../public/web/nav.jsp" %>

<div class="banner cf mb50" style="background-image:url(${ctx}/static/web/images/shoe-list-bg.jpg)">
    <h2 class="cn">精品鞋款</h2>
    <h3 class="en">The Collections</h3>
</div>

<div class="w1200 m_center cf">
    <div class="align_center list-select mb50">
        <div class="select">
            <span class="text">{{searchKey.belongSex==''?'男款/女款':searchKey.belongSex}}</span>
            <select ms-duplex="searchKey.belongSex">
                <option value="">男款/女款</option>
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div class="select">
            <span class="text">{{searchKey.style==''?'全部款式':searchKey.style}}</span>
            <select ms-duplex="searchKey.style">
                <option value="">全部款式</option>
                <c:forEach items="${baseInfo.shoeStyles}" var="style">
                    <option value="${style}">${style}</option>
                </c:forEach>
            </select>
        </div>
        <div class="select">
            <span class="text">{{searchKey.color==''?'所有颜色':searchKey.color}}</span>
            <select ms-duplex="searchKey.color">
                <option value="">所有颜色</option>
                <c:forEach items="${baseInfo.shoeColors}" var="color">
                    <option value="${color}">${color}</option>
                </c:forEach>
            </select>
        </div>
        <div class="select">
            <span class="text">{{searchKey.material==''?'全部材质':searchKey.material}}</span>
            <select ms-duplex="searchKey.material">
                <option value="">全部材质</option>
                <c:forEach items="${baseInfo.shoeMaterials}" var="material">
                    <option value="${material}">${material}</option>
                </c:forEach>
            </select>
        </div>
        <div class="select js_reset">
            <a href="javascript:;" onclick="reload()" class="btn_re">重置</a>
        </div>
    </div>
    <div class="list-xiezi cf">
        <div class="item" ms-repeat="tableData">
            <a class="img" ms-attr-href="${ctx}/shoes/{{el.id}}">
                <img class="animate" src="${ctx}/static/web/images/bj-xz.png" width="300" height="300"
                     ms-if="el.coverImg==null||el.coverImg==''">
                <img class="animate" ms-attr-src="${baseInfo.fileServerPath}{{el.coverImg}}" width="300" height="300"
                     ms-if="el.coverImg!=null&&el.coverImg!=''">
            </a>
            <p class="name">{{el.name}}</p>
            <p class="price"><strong>￥{{el.price}}</strong></p>
        </div>
    </div>
</div>
<script type="text/javascript">
    var vm = {
        tableData: [],
        searchKey: {belongSex: '', style: '', color: '', material: '', shoeBelow: '皮底'}
    };
    $(function () {
        $(".js_reset").hide();
        vm = avalonFn.define("shoesList", vm);
        avalonFn.watch(vm, "searchKey.*", function (n, o) {
            $(".js_reset").show();
            loadTableData();
        });
        loadTableData();
    });

    function loadTableData() {
        var url = "${ctx}/shoes/selectAll";
        var dataStr = avalonFn.model(vm).searchKey;
        ajaxUtil.post(url, dataStr, false, function (data) {
            vm.tableData = data.dataMap.shoesList;
        })
    }

    //重置
    function reload() {
        window.location.reload();
    }
</script>
<%@include file="../public/web/footer.jsp" %>
</body>
</html>

